<template>
  <div class="login-page">
    <van-nav-bar
      title="面经登录"
    />
    <!-- @submit 事件：当点击表单容器内部的 submit 类型的按钮时会触发 -->
    <!-- 说明：当表单校验不通过时，不会触发 submit -->
    <van-form @submit="onSubmit">
      <!-- rules 配置校验规则，数组，可配多个规则 -->
      <!-- pattern 可以配置正则规则，\w 预定义字符类: 表示由 字母、数字、下划线 组成 -->
      <van-field
        v-model="username"
        name="username"
        label="用户名"
        placeholder="用户名"
        :rules="[
          { required: true, message: '请填写用户名' },
          { pattern: /^\w{6,12}$/, message: '用户名长度为：6~12 个字符' }
        ]"
      />
      <van-field
        v-model="password"
        type="password"
        name="password"
        label="密码"
        placeholder="密码"
        :rules="[
          { required: true, message: '请填写密码' },
          { pattern: /^\w{6,16}$/, message: '密码长度为：6~16 个字符' }
        ]"
      />
      <div style="margin: 16px;">
        <!-- native-type="submit" 表示将这个按钮指定为一个 submit 类型的按钮 -->
        <van-button block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
    <RouterLink class="link" :to="{ name: 'RegisterPage' }">注册账号</RouterLink>
    <div style="clear: both;"></div>
    <div style="padding: 10px; border: 1px solid red; width: 200px;">测试 style 内联样式 postcss-px-to-viewport，style 不会经过 插件的 px 转 rem，所以，以后不要在 style 上写包含尺寸单位的样式</div>
  </div>
</template>

<script>
import { login } from '@/api/user.js'
import { setToken } from '@/utils/storage.js'

export default {
  name: 'LoginPage',
  data () {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    async onSubmit (values) {
      // 能够执行到这个函数内部，就说明表单数据校验已经通过了
      // values 采集的数据的 键名 取自于 van-field 组件的 name 属性值
      console.log('submit', values)

      const res = await login(values.username, values.password)
      // 能走到这里，说明登录成功
      // console.log(res, '登录接口的响应数据')

      // 直接使用 localStorage 的弊端：
      // 1. key 有可能写错
      // 2. key 有可能后续变化，不利于维护
      // 3. 存储逻辑有可能改变，不利于维护
      // localStorage.setItem('token', res.data.data.token)
      // setToken(res.data.data.token)
      // 响应拦截器做完数据提取处理后，这里直接拿到的就是后端返回的响应数据
      setToken(res.data.token)

      this.$toast.success('登录成功')
      this.$router.push({ name: 'root' })
    }
  }
}
</script>

<style lang="less" scoped>
.link {
  color: #069;
  font-size: 12px;
  padding-right: 20px;
  float: right;
}
</style>
